<template>
  <view></view>
  <view class="container">
    <!-- 头部菜单 -->
    <view class="order-tit">
      <text data-orderStatus="0" :class="orderStatus==0?'on':''" @tap="onorderStatusTap">
        全部
      </text>
      <text data-orderStatus="1" :class="orderStatus==1?'on':''" @tap="onorderStatusTap">
        待支付
      </text>
      <text data-orderStatus="2" :class="orderStatus==2?'on':''" @tap="onorderStatusTap">
        待发货
      </text>
      <text data-orderStatus="3" :class="orderStatus==3?'on':''" @tap="onorderStatusTap">
        待收货
      </text>
      <text data-orderStatus="4" :class="orderStatus==4?'on':''" @tap="onorderStatusTap">
        已完成
      </text>
      <text data-orderStatus="5" :class="orderStatus==5?'on':''" @tap="onorderStatusTap">
        已取消
      </text>
    </view>
    <!-- end 头部菜单 -->
    <view class="main">
      <view v-if="list.length==0" class="empty">
        还没有任何相关订单
      </view>
      <!-- 订单列表 -->
      <block v-for="(item, index) in list" :key="index">
        <view class="prod-item">
          <view class="order-num">
            <text>订单编号：{{ item.id }}</text>
            <view class="order-state">
              <text
                :class="'order-orderStatus  ' + (item.status==1?'red':'') + '  ' + ((item.status==5||item.status==6)?'gray':'')">
                {{
                  item.status == 1 ? '待支付' : (item.status == 2 ? '待发货' : (item.status == 3 ? '待收货' : (item.status == 4 ? '已完成' : '已取消')))
                }}
              </text>
            </view>
          </view>

          <!-- 商品列表 -->
          <view>
            <view class="item-cont" :data-ordernum="item.id" @tap="toOrderDetailPage">
              <view class="prod-pic">
                <image :src="item.pic" />
              </view>
              <view class="prod-info">
                <view class="prodname">
                  {{ item.productName }}
                </view>
                <view class="prod-info-cont">
                  {{ item.skuName }}
                </view>
                <view class="price-nums">
                  <text class="prodprice">
                    <text class="symbol">
                      ￥
                    </text>
                    <text class="big-num">
                      {{ wxs.parsePrice(item.totalPrice)[0] }}
                    </text>
                    <text class="small-num">
                      .{{ wxs.parsePrice(item.totalPrice)[1] }}
                    </text>
                  </text>

                </view>
              </view>
            </view>
          </view>


          <view class="total-num">
            <text class="prodcount">
              共1件商品
            </text>
            <view class="prodprice">
              合计：
              <text class="symbol">
                ￥
              </text>
              <text class="big-num">
                {{ wxs.parsePrice(item.totalPrice)[0] }}
              </text>
              <text class="small-num">
                .{{ wxs.parsePrice(item.totalPrice)[1] }}
              </text>
            </view>
          </view>
          <!-- end 商品列表 -->
          <view class="prod-foot">
            <view class="btn">
              <text v-if="item.status==1 || item.status==2" class="button" :data-ordernum="item.id" hover-class="none"
                @tap="onCancelOrder">
                取消订单
              </text>
              <text v-if="item.status==1" class="button warn" :data-ordernum="item.id" hover-class="none"
                @tap="toPayPage">
                付款
              </text>
              <text v-if="item.status==3 || item.status==4" class="button" :data-expressNumber="item.id"
                hover-class="none" @tap="copyExpressNumber">
                复制物流单号
              </text>
              <text v-if="item.status==3" class="button warn" :data-ordernum="item.id" hover-class="none"
                @tap="onConfirmReceive">
                确认收货
              </text>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
  <!-- end 订单列表 -->
</template>

<script setup>
  const wxs = number()

  const orderStatus = ref(0)
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad((options) => {
    loadOrderData(0, 1)
  })

  const current = ref(1)
  const pages = ref(0)
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom(() => {
    if (current.value < pages.value / 10) {
      loadOrderData(orderStatus.value, current.value + 1)
    } else {
      uni.showToast({
        title: '没有更多了',
        icon: 'none'
      })
    }
  })

  const list = ref([])
  /**
   * 加载订单数据
   */
  const loadOrderData = ( orderStatus, currentParam) => {
    uni.showLoading() // 加载订单列表
    http.request({
        url: '/orders/myBuyOrder',
        method: 'GET',
        data: {
          orderStatus: orderStatus,
          current: currentParam,
        }
      })
      .then(({
        data
      }) => {
        console.log("订单数据");
        console.log(data);
        let listParam = []
        if (data.current === 1) {
          listParam = data.records
        } else {
          listParam = list.value
          Array.prototype.push.apply(listParam, data.records)
        }
        list.value = listParam
        pages.value = data.pages
        current.value = data.current
        uni.hideLoading()
      })
  }
  /**
   * 状态点击事件
   */
  const onorderStatusTap = (e) => {
    orderStatus.value = e.currentTarget.dataset.orderStatus
    console.log("切换了状态");
    console.log(e);
    console.log(e.currentTarget.dataset);
    console.log(orderStatus.value);
    loadOrderData( orderStatus.value, 1)
  }

  /**
   * 复制物流单号
   */
  const copyExpressNumber = (e) => {
    const expressNumber = e.currentTarget.dataset.expressnumber
    uni.setClipboardData({
      data: expressNumber,
      success: function() {
        uni.showToast({
          title: '复制成功'
        })
      }
    })

  }

  /**
   * 取消订单
   */
  const onCancelOrder = (e) => {
    const ordernum = e.currentTarget.dataset.ordernum
    uni.showModal({
      title: '',
      content: '要取消此订单？',
      confirmColor: '#3e62ad',
      cancelColor: '#3e62ad',
      cancelText: '否',
      confirmText: '是',

      success(res) {
        if (res.confirm) {
          uni.showLoading({
            mask: true
          })
          http.request({
              url: '/orders/cancel/' + ordernum,
              method: 'PUT',
              data: {}
            })
            .then(() => {
              loadOrderData(orderStatus.value, current.value)
              uni.hideLoading()
            })
        }
      }
    })
  }

//去支付
  const toPayPage = (e) => {
    console.log(e);
    console.log(e.currentTarget.dataset.ordernum);
    uni.navigateTo({
      url: '/pages/pay/pay?orderId=' + e.currentTarget.dataset.ordernum
    })
  }

  /**
   * 查看订单详情
   */
  const toOrderDetailPage = (e) => {
    uni.navigateTo({
      url: '/pages/order-detail/order-detail?orderNum=' + e.currentTarget.dataset.ordernum
    })
  }

  /**
   * 确认收货
   */
  const onConfirmReceive = (e) => {
    uni.showModal({
      title: '',
      content: '我已收到货？',
      confirmColor: '#eb2444',

      success(res) {
        if (res.confirm) {
          uni.showLoading({
            mask: true
          })
          http.request({
              url: '/orders/receipt/' + e.currentTarget.dataset.ordernum,
              method: 'PUT'
            })
            .then(() => {
              loadOrderData(orderStatus.value, current.value)
              uni.hideLoading()
            })
        }
      }
    })
  }

</script>

<style scoped lang="scss">
  @use './myBuyOrderList.scss';
</style>
